<template id="PassOn">
  <div class="PassOn">
    <div class="pc"></div>
    <div class="phone">
      <div class="top">
        <img :src="productData.image" class="goodImage" />
        <p class="goodTitle">{{ productData.goods_name }}</p>
      </div>
      <div class="address">
        <p>钱包地址：</p>
        <el-input v-model="address" placeholder="请输入钱包地址"></el-input>
      </div>
      <div class="passWord">
        <p>输入密码：</p>
        <van-password-input
          :value="passWord"
          :length="6"
          :gutter="10"
          :error-info="errorInfo"
          @focus="showKeyboard = true"
        />
        <van-number-keyboard
          v-model="passWord"
          :show="showKeyboard"
          @blur="showKeyboard = false"
        />
      </div>
      <div class="unset">
        <p v-if="userInfo.is_pwd === 0" @click="unsetPassword">未设置密码 ？</p>
        <p v-else-if="userInfo.is_pwd === 1" @click="forgotPassword">
          忘记密码
        </p>
      </div>
      <md-button @click="transferToken" class="md-round confirmBtn"
        >确定</md-button
      >
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { getGoodsInfoApi, transferTokenApi } from "@/api";
import { iscode } from "@/utils";
import { mapState } from "vuex";
export default {
  name: "",
  components: {},
  // 定义属性
  data() {
    return {
      productData: {},
      showKeyboard: false,
      errorInfo: "",
      passWord: "",
      address: "",
    };
  },

  // 计算属性，会监听依赖属性值随之变化
  computed: {
    // 用户信息
    ...mapState(["userInfo"]),
  },
  // 监控data中的数据变化
  watch: {
    passWord(newVal, oldVal) {
      if (newVal.length > 6) {
        newVal = newVal.substring(0, 6);
        this.passWord = newVal;
      }
      if (newVal.length === 6) {
        this.showKeyboard = false;
        //   this.errorInfo = "密码错误";
      } else {
        this.errorInfo = "";
      }
    },
  },
  // 方法集合
  methods: {
    async getGoodsInfo() {
      let result = await getGoodsInfoApi({ id: this.$route.query.id });
      if (iscode(result)) {
        this.productData = result.result.goods_info;
        this.$set(
          this.productData,
          "image",
          result.result.show_url + result.result.goods_info.images[0]
        );
      }
    },
    // 转赠藏品
    async transferToken() {
      if (!this.address.trim() || !this.passWord.trim()) {
        this.$toast("钱包地址或支付密码不能为空");
        return;
      }
      let res = await transferTokenApi({
        password: this.passWord,
        toaddress: this.address,
        order_id: this.$route.query.order_id,
      });
      if (iscode(res)) {
        this.$toast({ message: "转赠成功" });
        // 清空数据残留
        this.passWord = "";
        this.address = "";
        setTimeout(() => {
          this.$router.push("/personalCurrentlyOwned");
        }, 800);
      }
    },
    unsetPassword() {
      this.$router.push("/setPassword");
    },
    forgotPassword() {
      this.$router.push("/resetPassword");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getGoodsInfo();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.PassOn {
  padding: 70px 30px;
  .pc {
  }
  .top {
    display: flex;
    .goodImage {
      width: 280px;
      height: 277px;
      border-radius: 20px;
      box-shadow: 5px 5px 5px #000;
    }
    .goodTitle {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin: 30px 0 0 50px;
    }
  }
  .address {
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin: 0;
    }
    .el-input {
      width: 80%;
      font-size: 30px;
      /deep/.el-input__inner {
        height: 60px;
        border-radius: 12px;
      }
    }
  }
  .passWord {
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin: 0;
    }
    /deep/.van-password-input {
      width: 80%;
      margin: 0;
      .van-password-input__item {
        border: 1px solid #dcdfe6;
        border-radius: 12px;
        flex: unset;
        width: 70px;
        height: 60px;
      }
      .van-password-input__item--focus {
        border: 1px solid #448aff;
      }
    }
  }
  .unset {
    width: 80%;
    margin-top: 80px;
    display: flex;
    margin-left: auto;
    color: #0b81ef;
    p {
      font-size: 25px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin: 0;
      margin-right: 50px;
    }
  }
  .confirmBtn {
    display: flex;
    margin: 80px auto 0 auto;
    width: 220px;
    height: 70px;
    font-size: 28px;
    font-weight: 400;
    background: #e52d27 !important;
  }
}
@media screen and (max-width: 768px) {
  .PassOn {
    padding: 0;
    .pc {
      display: none;
    }
    .phone {
      display: block;
      .top {
        display: flex;
        .goodImage {
          width: 280px;
          height: 277px;
          border-radius: 20px;
          box-shadow: 5px 5px 5px #000;
        }
        .goodTitle {
          font-size: 30px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          margin: 30px 0 0 50px;
        }
      }
      .address {
        margin-top: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          font-size: 30px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          margin: 0;
        }
        .el-input {
          width: 80%;
          font-size: 30px;
          /deep/.el-input__inner {
            height: 60px;
            border-radius: 12px;
          }
        }
      }
      .passWord {
        margin-top: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          font-size: 30px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          margin: 0;
        }
        /deep/.van-password-input {
          width: 80%;
          margin: 0;
          .van-password-input__item {
            border: 1px solid #dcdfe6;
            border-radius: 12px;
            flex: unset;
            width: 70px;
            height: 60px;
          }
          .van-password-input__item--focus {
            border: 1px solid #448aff;
          }
        }
      }
      .unset {
        width: 80%;
        margin-top: 80px;
        display: flex;
        margin-left: auto;
        color: #0b81ef;
        p {
          font-size: 25px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          margin: 0;
          margin-right: 50px;
        }
      }
      .confirmBtn {
        display: flex;
        margin: 80px auto 0 auto;
        width: 220px;
        height: 70px;
        font-size: 28px;
        font-weight: 400;
        background: #e52d27 !important;
      }
    }
  }
}
</style>
